<template lang="">
    <div>
        <!-- 表格展示 -->
        <el-table :data="tableData" v-loading="loading" stripe border>
            <el-table-column type="selection"></el-table-column>
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column prop="room" label="房间号"></el-table-column>
            <el-table-column prop="quantityElectric" label="用水量"></el-table-column>
            <el-table-column prop="costWater" label="水费"></el-table-column>
            <el-table-column prop="quantityElectric" label="用电量"></el-table-column>
            <el-table-column prop="costElectric" label="电费"></el-table-column>
            <el-table-column prop="costTotal" label="水电费总计"></el-table-column>
        </el-table>
    </div>
</template>
<script>
import { mapGetters } from "vuex";
import { getUtilityBill } from '@/api/utilitybill'
export default {
    data() {
        return {
            tableData:[],
            loading:false,
        }
    },
     computed: {
        ...mapGetters(["username"]),
    },
    created() {
        this.getUtilityBill()
    },
    methods: {
        getUtilityBill(){
            // let username = JSON.parse(sessionStorage.getItem("state"))
            // this.params.username = username.username
            getUtilityBill({username:this.username}).then((res)=>{
                this.tableData = res.data.records
                console.log(res);
            })
        }
    },
}
</script>
<style lang="">
    
</style>